<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <title>clunch.js - 用例测试</title>
    <script src="../../dist/clunch-template.js"></script>
    <link rel="shortcut icon" href="../../clunch.png">
    <style>
        #root {
            width: 100vw;
            height: 400px;
        }
    </style>
</head>

<body>

    <div id="root">
        <arc c-bind:cx='_width*0.5' c-bind:cy='_height*0.5' c-bind:radius1='_min*0.5' radius2='100' deg='120deg'></arc>
        <group c-for='value in dataList'>
            <circle c-bind:cx='value' c-on:click='doit0' c-bind:cy='value' radius='10'></circle>
            <text c-bind:x='value+20' c-bind:y='value' c-bind:content='value' fill-color='red'></text>
        </group>
        <path>
            1
            <move-to x='10' y='10'></move-to>
            2
            <line-to x='100' y='100'></line-to>
            3
        </path>
        <text c-bind:x='_width*0.5' c-bind:y='_height*0.5'>文字</text>
    </div>

    <!--

        render(未aop):[{
            arc:{
                attr:{
                    cx:'50vw',cy:'50vh',radius:'50vmin'
                }
            }
        },{
            group:{
                attr:{
                    "c-for":"value in dataList"
                },
                children:[{
                    text:{
                        attr:{...}
                    }
                },{
                    circle:{
                        attr:{...}
                    }
                }]
            }
        }]

     -->

    <script>

        window.clunch = new Clunch({
            el: document.getElementById('root'),

            // template:"<arc cx='50vw' cy='50vh' radius='50vmin'></arc>",

            /**
             * 方法
            */


            methods: {

                // 格式0
                doit0:function(target) {
                    console.log(target);
                },

                // 格式1
                doit1: ['$move', function ($move) {
                    return function () {
                        console.warn($move);
                        console.log('1');
                    };
                }]
            },

            /**
             * 数据格式
             */

            //  格式0
            // data:{
            //     flag:0
            // },

            //  格式1
            // data() {
            //     return {
            //         flag:1
            //     };
            // },

            // 格式2
            data: ['$dot', '$tree', function ($dot, $tree) {
                return {
                    flag: 2,
                    dot_: $dot,
                    _tree_: $tree,
                    dataList: [10, 100, 50]
                };
            }],

            /**
             * 生命周期
            */
            beforeCreate: ['$tree', function ($tree) {
                return function () {
                    // debugger
                    console.log('beforeCreate');
                };
            }],
            created: function () {
                console.log('created');
            },
            beforeMount: [function () {
                return function () {
                    console.log('beforeMount');
                };
            }],
            mounted: function () {
                console.log('mounted');
            },
            beforeUnmount: function () {
                console.log('beforeUnmount');
            },
            unmounted: function () {
                console.log('unmounted');
            },
            beforeUpdate: function () {
                console.log('beforeUpdate');
            },
            updated: function () {
                console.log('updated');
            },
            beforeDraw: function () {
                console.log('beforeDraw');
            },
            drawed: function () {
                console.log('drawed');
            },
            beforeResize: ['$tree', function ($tree) {
                return function () {
                    // debugger
                    console.log('beforeResize');
                };
            }],
            resized: ['$tree', function ($tree) {
                return function () {
                    // debugger
                    console.log('resized');
                };
            }],
            beforeDestroy: ['$tree', function ($tree) {
                return function () {
                    // debugger
                    console.log('beforeDestroy');
                };
            }],
            destroyed: ['$tree', function ($tree) {
                return function () {
                    // debugger
                    console.log('destroyed');
                };
            }]
        }).$bind('click', function (data) {
            console.warn(this);
            console.warn(data);
        });

        console.log(window.clunch);

        // Clunch.series('ui-demo',['any',function($any){
        //     return {};
        // }]);
        // window.clunch1=new Clunch({});


    </script>

</body>

</html>
